<template>
  <div class="app-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="150px"
      class="demo-ruleForm"
      style="width: 800px"
    >
      <el-form-item label="学生姓名" prop="studentName">
        <el-input v-model="ruleForm.studentName" disabled />
      </el-form-item>
      <el-form-item label="是否同意送教" prop="isConsentOutwork">
        <el-select
          v-model="ruleForm.isConsentOutwork"
          placeholder="请选择是否同意送教"
        >
          <el-option label="是" :value="1" />
          <el-option label="否" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.isConsentOutwork === 1" label="家长同意书" prop="familyConsentLetter">
        <my-upload v-model="ruleForm.familyConsentLetter" list-type="text" img-type="pdf" />
        <div v-if="!ruleForm.familyConsentLetter || ruleForm.familyConsentLetter.length === 0" style="color: #bbb;">请上传pdf格式的文件</div>
      </el-form-item>
      <el-form-item v-if="ruleForm.isConsentOutwork === 2" label="家长不同意知情书" prop="familyRefuseInformedLetter">
        <my-upload v-model="ruleForm.familyRefuseInformedLetter" list-type="text" img-type="pdf" />
        <div style="color: #bbb;">请上传pdf格式的文件</div>
      </el-form-item>
      <el-form-item v-if="ruleForm.isConsentOutwork" label="学生评估表" prop="studentAssessTable">
        <my-upload v-model="ruleForm.studentAssessTable" list-type="text" img-type="pdf" />
        <div v-if="!ruleForm.studentAssessTable || ruleForm.studentAssessTable.length === 0" style="color: #bbb;">请上传pdf格式的文件</div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyUpload from '@/components/my-upload/index'
import { getStudentDetail, addStudent } from '@/api/basic'
export default {
  components: { MyUpload },
  data() {
    return {
      ruleForm: {
        isConsentOutwork: ''
      },
      rules: {
        isConsentOutwork: [{ required: true, message: '请选择是否同意送教', trigger: 'change' }],
        familyConsentLetter: [
          { required: true, message: '请上传家长同意书', trigger: 'change' }
        ],
        familyRefuseInformedLetter: [
          { required: true, message: '请上传家长不同意知情书', trigger: 'blur' }
        ],
        studentAssessTable: [
          { required: true, message: '请上传学生评估表', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    console.log(this.$route)
    const route = this.$route
    if (route.name === 'student-set') {
      this.getDetail(route.params.id)
    }
  },
  methods: {
    async getDetail(id) {
      try {
        const res = await getStudentDetail({
          id: Number(id)
        })
        if (res) {
          console.log(res)
          const result = JSON.parse(JSON.stringify(res))
          result.familyConsentLetter = res.familyConsentLetter ? [
            {
              url: res.familyConsentLetter,
              name: '家长同意书.pdf'
            }
          ] : []
          result.familyRefuseInformedLetter = res.familyRefuseInformedLetter ? [
            {
              url: res.familyRefuseInformedLetter,
              name: '家长不同意知情书.pdf'
            }
          ] : []
          result.studentAssessTable = res.studentAssessTable ? [
            {
              url: res.studentAssessTable,
              name: '学生评估表.pdf'
            }
          ] : []
          result.isConsentOutwork = result.isConsentOutwork || ''
          this.ruleForm = result
        }
      } catch (err) {
        console.log('接口出错')
      }
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(that.ruleForm))
          if (that.ruleForm.familyConsentLetter && that.ruleForm.familyConsentLetter.length > 0) {
            params.familyConsentLetter = that.ruleForm.familyConsentLetter[0].url
          } else {
            params.familyConsentLetter = ''
          }
          if (that.ruleForm.familyRefuseInformedLetter && that.ruleForm.familyRefuseInformedLetter.length > 0) {
            params.familyRefuseInformedLetter = that.ruleForm.familyRefuseInformedLetter[0].url
          } else {
            params.familyRefuseInformedLetter = ''
          }
          if (that.ruleForm.studentAssessTable && that.ruleForm.studentAssessTable.length > 0) {
            params.studentAssessTable = that.ruleForm.studentAssessTable[0].url
          } else {
            params.studentAssessTable = ''
          }
          addStudent(params).then((res) => {
            if (res) {
              that.$message({
                message: '更新送教设置成功！',
                type: 'success'
              })
              that.$router.push('/basic/student')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
ul,
li {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.app-container {
  background: #fff;
  flex: 1;
}
.match-type-check-area {
  margin-top: 12px;
  .left {
    display: block;
    margin-bottom: 5px;
  }
}
</style>
